<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>注册界面</title>
	<link rel="icon" href="../static/img/logoIco.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="../static/css/base.css">

	<script src="../static/js/jquery-1.12.4.js"></script>

	<link rel="stylesheet" href="../static/css/prompt.css">
	<script src="../static/js/prompt.js"></script>
	<script src="../static/js/base.js"></script>

	<style type="text/css">

		.sign{
			width: 100%;
			height: 100%;
			font-size: 12px;
		}
		.title{
			width: 500px;
			height: 46px;
			position: relative;
		}
		.title img{
			width: 50px;
			height: 50px;
			display: inline-block;
			position: absolute;
			top: 19px;
			left: 80px;
		}
		.title .logo-title{
			font-family: "宋体";
			font-size: 20px;
			font-weight:bold;
			margin-bottom: 30px;
			color: #222222;
			display: inline-block;
			position: absolute;
			left: 150px;
			top: 29px;
		}

		/*主体部分*/
		.main{
			width: 380px;
			height: 490px;
			position: absolute;
			top: 150px;
			left: 50%;
			margin-left: -200px;
			padding: 40px;
			padding-bottom: 30px;
			box-sizing: border-box;
			background-color: white;
			box-shadow: 0 0 20px 0 #E5E5E5;
		}
		.main .main_title{
			width: 300px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			margin-bottom: 50px;
			box-sizing: border-box;
			border: 1px solid #ffffff;
		}
		.main_title h4{
			font-size: 18px;
			font-weight: 700;
			padding-left: 10px;
			padding-right: 10px;
			border-bottom: 2px solid #42c02e;
			display: inline-block;
		}
		.main_title h4:nth-child(3) a{
			color: #42c02e;
		}

		.main_title h4:nth-child(1) {
			color: #777777;
			font-weight: 400;
			border-bottom: none;
		}
		.main_title h4:nth-child(1) a{
			color: #777777;
			font-weight: 400;
		}
		.main_title h4:nth-child(1):hover{
			border-bottom: 2px solid #3E76FD;
		}
		.main .content{
			width: 300px;
			height: 320px;
		}

		.content #new_session{
			width: 300px;
			height: 200px;

		}
		.content #new_session .input-accent{
			position: relative;
		}
		.content #new_session .input-password{
			position: relative;
		}
		.content #new_session .identify-password{
			position: relative;
		}

		/*账户*/
		.content #new_session .input-accent input{
			width: 300px;
			height: 50px;
			border: 1px solid #999999;
			border-bottom: 0px solid #999999;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			padding: 4px 12px 4px 35px;
			box-sizing: border-box;
		}
		/*密码*/
		.content #new_session .input-password input{
			width: 300px;
			height: 50px;
			border: 1px solid #999999;
			padding: 4px 12px 4px 35px;
			box-sizing: border-box;
		}
		/*确认密码*/
		.content #new_session .identify-password input{
			width: 300px;
			height: 50px;
			border: 1px solid #999999;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top: 0px solid #999999;
			padding: 4px 12px 4px 35px;
			box-sizing: border-box;
		}

		.content #new_session i{
			position: absolute;
			height: 25px;
			width: 20px;
			top: 16px;
			left: 10px;
			font-size: 18px;
			color: #969696;
		}
		.content #new_session .input-accent i{
			background: url("../static/img/用户1.png") no-repeat left top;
			background-size: 18px 18px;
		}
		.content #new_session .input-password i{
			background: url("../static/img/邮箱.png") no-repeat left top;
			background-size: 18px 18px;
		}
		.content #new_session .identify-password i{
			background: url("../static/img/密码1.png") no-repeat left top;
			background-size: 18px 18px;
		}
		#new_session .more{
			width: 300px;
			height: 50px;
			position: relative;

		}
		#new_session .more input{
			width: 18px;
			height: 18px;
			position: absolute;
			top: 17px;
			left: 0;
		}
		#new_session .more span{
			font-size: 14px;
			line-height: 20px;
			color: #777777;
		}
		#new_session .more span:nth-child(2){
			position: absolute;
			top: 15px;
			left: 25px;
		}
		#new_session .more span:nth-child(3){
			position: absolute;
			top: 15px;
			right: 0;
		}
		#new_session .register-in-button{
			width: 300px;
			height: 43px;
			background-color: #42c02e;
			padding: 9px 18px 9px 18px;
			margin-top: 20px;
			font-size: 18px;
			border-radius: 18px;
			color: #ffffff;
			border: none;
			cursor: pointer;
			clear: both;
		}

		.content .content_moreSign{
			width: 100%;
			height: 73px;
			margin-top: 50px;
		}

		.content .content_moreSign h6{
			text-align: center;
			color: #777777;
			font-size: 12px;
			margin-bottom: 10px;
		}
		.content .content_moreSign ul{
			width: 300px;
			height: 50px;
			list-style: none;
			text-align: center;
			font-size: 14px;
			padding-left: 30px;
			margin-bottom: 10px;
		}
		.content .content_moreSign ul li{
			width: 50px;
			height: 50px;
			cursor:pointer;
			margin: 0 5px 0 5px;
			float: left;
			display: inline-block;
		}
		.content .content_moreSign ul li:nth-child(1){
			background: url("../static/img/微博 (1).png") no-repeat center center;
			background-size: 30px 30px;
		}
		.content .content_moreSign ul li:nth-child(2){
			background: url("../static/img/微信.png") no-repeat center center;
			background-size: 30px 30px;
		}
		.content .content_moreSign ul li:nth-child(3){
			background: url("../static/img/qq1.png") no-repeat center center;
			background-size: 30px 30px;
		}
		.content .content_moreSign ul li:nth-child(4){
			line-height: 50px;
			color: #777777;
		}
	</style>
	<script>
        $(function () {
            $('.noOpen').click(function () {
                promptInfo(0, '该功能暂未开放~~');
            })
        })
	</script>
</head>
<body>
<script>
    $(function () {
        // 注册提示
        var $timer;

        // 接收后端的数据
        var result = {{ result | safe }};

        var flag = result['flag'];
        var message = result.message;

        // 打印提示
        promptInfo(flag, message);

        console.log(flag, message);

        // 如果登录成功，3秒钟后转到login页面
        if(flag == 1){
            clearInterval($timer);
            $timer = setInterval(function () {
                window.location.href="http://127.0.0.1:8000/";
            }, 3000);
        }
    })
</script>

	<div class="sign">
		<div class="title">
			<img src="../static/img/logo.png">
			<div class="logo-title">一带一路 电商影响因素识别系统</div>
		</div>

		<div class="main">
				<!--<h1>{{message}}</h1>-->
			<div class="main_title">
				<h4><a href="../">登录</a></h4>	<b>·</b> <h4><a href="register">注册</a></h4>
			</div>

			<!--登录框区域 !-->
			<div class="content">
				<div class="content_sign">

					<form action="" id="new_session" method="post">
						{% csrf_token %}
						<div class="input-accent">
							<input id="register-name" type="text" name="username" placeholder="你的昵称">
							<i class="ic-user"></i>
						</div>
						<div class="input-password" >
							<input id="register-email" type="text" name="email" placeholder="你的邮箱">
							<i class="ic-password"></i>
						</div>
						<div class="identify-password" >
							<input id="register-passwd" type="password" name="password" placeholder="密码">
							<i class="ic-password"></i>
						</div>

						<input class="register-in-button" type="submit" value="注册">
					</form>

				</div>
				<div class="content_moreSign">
					<h6>————&nbsp;&nbsp;&nbsp;社交帐号注册&nbsp;&nbsp;&nbsp;————</h6>
					<ul>
						<li class="noOpen"></li>
						<li class="noOpen"></li>
						<li class="noOpen"></li>
						<li class="noOpen">其它</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</body>
</html>